表单验证（-）

这里是表单验证的第一课：主要讲授有关表单的基础知识。
关于表单验证的更多知识可以参考《javascript高级程序设计》之第14章：表单脚本

1.表单事件

submit():提交表单
reset():将所有表单域重置为默认值

（1）.取得form元素的引用

   （1）var form=document.getElementById('form1');
    (2)var form=document.getElementByTagName('form1');
    (3)var forms=document.forms//取得页面中所有表单
    var form=document.forms[0]//取得页面中第一个表单
    var form=document.forms['form2'//取得页面中name="form2"的表单

（2）.提交表单

<!--通用提交按钮-->
(1)<input type="submit" value='提交'>
 <!--自定义提交按钮-->
(2)<button type="submit">提交</button>
<!--图像按钮-->
(3)<input type="image" src="graph.gif">

以上方式提交表单时，浏览器会在将请求发送给服务器之前会触发submit事件。这样我们就有机会验证表单数据，并据以决定是否允许表单提交。
在编写表单提交代码之前，我们需要先了解一下浏览器兼容代码，代码文件EventUtil.js内容就发布在我的文章里，有兴趣的可以拿来好好读一读，这里不再阐述，直接使用。
下面代码会阻止表单提交：

var form=document.getElementById('myForm);
EventUtil.addHandler(form,'submit',function(event){
    //取得时间对象
    var event=EventUtil.getEvent(event);
    //阻止默认事件
    EventUtil.preventDefault();  
})

注意：

   var form=document.getElementById('myForm);
    form.submit();

以这种方式提交表单，不会触发submit事件。

(3)重置表单

<!--通用提交按钮-->
(1)<input type="reset" value='提交'>
 <!--自定义提交按钮-->
(2)<button type="reset">提交</button>

下面代码会阻止表单重置：

var form=document.getElementById('myForm);
EventUtil.addHandler(form,'reset',function(event){
    //取得时间对象
    var event=EventUtil.getEvent(event);
    //阻止默认事件
    EventUtil.preventDefault();  
})

注意：

   var form=document.getElementById('myForm);
    form.reset();

与submit事件不同，以这种方式提交表单，将会触发reset事件。

2.表单字段
可以像访问页面中其他元素一样，使用原生DOM方法访问表单元素。此外，每个表单都有Elements属性，该属性是表单中所有表单元素（字段）的集合。这个elements是有序表，其中包含着表单中的所有字段，例如:<fieldset>、<input>、<textarea>、<select>。每个表单字段在elements集合中出现的顺序与它们出现在标记中的顺序相同，可以按照位置和name属性来访问到。

var form=document.getElementById('myForm);
var filed1=form.elements[0];//获得表单中的一个字段
var filed2=form.element['textbox'];//获得表单中名为textbox的字段
var len=form.elements.length;//取的表单中包含的字段的数量

还有focus()和blue()方法 ：

form.elements[0].focus(): 表单字段获取焦点
form.elements[0].blur():表单字段获取焦点

共有的表单属性：

disabled:布尔值，表示当前表单是否被禁用
form：指向当前字段所属表单的指针
name:当前字段的名称
type:当前字段的类型
value:当前字段将别提交给服务器的值
此外还有：readOnly、tabIndex

<script type="text/javascript">
    EventUtil.addHandler(form,'submit',function(event){
        //获取目标元素
        var event=EventUtil.getEvent(event);
        var target=EventUtil.getTarget(event);
        //获取提交按钮
        var btn=target.element['submit-btn'];
        //禁用提交按钮
        btn.disabled=true;
    });

</script>

3.共有的表单字段方法：
focus:当前字段获得焦点时触发
blur：当前字段失去焦点时触发
change:在它们失去焦点并且value值发生变化时触发
对于<input> <textarea>元素，当它们从获得焦点到失去焦点且value值改变时，才会触发change。对于<select>元素，只要用户选择了不同的选项，就会触发change事件。